<template>
	<div class="gameParamsConfig" :style="{width:initWidth}">
		<div class="right_header" :style='{"background":this.$store.getters.theme[5]}'>
			<div class="listName" :style='{"color":this.$store.getters.theme[6]}'> <i class="icon iconfont">&#xe7d8;</i>
				当前位置/系统配置/
				<span>游戏参数配置</span>
			</div>
		</div>
		<div class="right_content">
			<div class="form">
				<div class="divider2"></div>
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-form-inline" :inline="true">
					<div class="import">
						<el-form-item label="选择游戏：" :label-width="formLabelWidth">
							<el-select
							  v-model="games" @change='projectsChange'
							  placeholder="请选择游戏" type="success" multiple>
								<el-option
							    v-for="item in projects"
						        :label="item.label"
						        :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="参数类型" prop="region" :label-width="formLabelWidth">
							<el-select
							  v-model="ruleForm.region" filterable
							  placeholder="请选择类型" type="success" @change="options5Fn">
								<el-option
							    v-for="item in options5"
							    :key="item.value"
							    :label="item.label"
							    :value="item.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="参数ID："  prop="pzId" :label-width="formLabelWidth">
							<el-input v-model.number="ruleForm.pzId"></el-input>
						</el-form-item>
						<el-form-item label="参数值："  prop="pzval" :label-width="formLabelWidth">
							<el-input v-model="ruleForm.pzval"></el-input>
						</el-form-item>
						<el-form-item label="排序：" prop="pzSort" :label-width="formLabelWidth">
							<el-input v-model="ruleForm.pzSort"></el-input>
						</el-form-item>
					</div>
					<el-form-item class="conmit">
						<el-button type="primary" @click="submitForm('ruleForm')" icon="plus">立即添加</el-button>
						<el-button type="primary" @click="serachForm('ruleForm')" icon="search">立即搜索</el-button>
						<el-button type="primary" @click="uploadForm('ruleForm')" icon="upload">立即上传</el-button>
						<el-button @click="resetForm('ruleForm')">重置</el-button>
						<br>
						<span class="warning">（输入搜索条件，留空搜索全部！）</span>
					</el-form-item>
				</el-form>
				<div class="divider2"></div>
			</div>
			<div class="table">
				<el-table
				:data="tableData"
				border 
				style="width: 100%"  >
					<el-table-column align="center"
					  label="游戏名称">
						<template scope="scope">
							<el-tag>{{ scope.row.gameName }}</el-tag>
						</template>
					</el-table-column>
					<el-table-column align="center"
					  label="参数类型">
						<template scope="scope">
							<el-select v-model="scope.row.paramtypeName" disabled placeholder="请选择">
							</el-select>
						</template>
					</el-table-column>
					<el-table-column align="center"
					  label="参数ID">
							<template scope="scope">
								<span>{{ scope.row.paramid }}</span>
							</template>
					</el-table-column>
					<el-table-column align="center"
					  label="参数值">
							<template scope="scope">
								<el-input v-model="scope.row.paramname" placeholder="请输入内容"></el-input>
							</template>
					</el-table-column>
					<el-table-column align="center"
					  label="排序">
						<template scope="scope">
							<el-input v-model="scope.row.seq" placeholder="请输入内容"></el-input>
						</template>
					</el-table-column>
					<el-table-column align="center"
					  label="操作">
						<template scope="scope">
							<el-button
								size="small"
								@click="handleEdit(scope.$index, scope.row)">修改</el-button>
							<el-button
								size="small"
								type="danger"
								@click="handleDelete(scope.$index, scope.row)">删除</el-button>
						</template>
					</el-table-column>


				</el-table>
					<div class="pages">
						<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="currentPage"
							:page-sizes="pageSizes"
							:page-size="pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="dataTotal">
						</el-pagination>
					</div>
			</div>
		</div>
		<div class="uploadForm" v-show="uploadShow">
			<div class="uploadChoose">
				<div class="vicp-close"  @click="uploadHide"> <i class="el-icon-close vicp-icon4"></i>
				</div>
				<div class="upload">
					<h5>上传文件</h5>
					<h6>说明：</h6>
					<ol>
						<li>上传的文件必须为Excel文件；</li>
						<li>文件内容不能有表头，必须直接是数据；</li>
						<li>数据共分为三列：类型（在系统配置-游戏参数类型配置中配置和查看），KEY，VALUE。其中类型列的数据必须一致。</li>
					</ol>
					<p>示例（物品类型配置）如下：</p>
					<img src="./adUpload.jpg" width="354" alt="上传图片">
					<el-upload
					  class="upload-demo"
					  drag
					  action="http://10.236.44.188:8080/gameparam/upload.do"
					  multiple>
					  <i class="el-icon-upload"></i>
					  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
					</el-upload>
				</div>
			</div>
		</div> 
	</div>
</template>
<style lang="stylus" rel="stylesheet/stylus" src="./gameParamsConfig.styl"></style>
<script src="./gameParamsConfig.js"></script>